import 'package:flutter/material.dart';
import 'package:flutter_yfree/YFree.dart';
import 'package:popover/popover.dart';

class ChatFaceButton extends StatefulWidget {
  const ChatFaceButton({
    required this.onFaceTap,
    required this.onDeleteTap,
    Key? key,
  }) : super(key: key);

  final Function(int index) onFaceTap;
  final Function() onDeleteTap;

  @override
  _ChatFaceButtonState createState() => _ChatFaceButtonState();
}

class _ChatFaceButtonState extends State<ChatFaceButton> {
  bool isShowPopup = false;

  @override
  Widget build(BuildContext context) {
    return YButton(
      isInk: true,
      child: Icon(Icons.emoji_emotions_outlined, color: isShowPopup ? YConfig.themeColor : Colors.grey.shade600, size: 25),
      onTap: () {
        setState(() => isShowPopup = true);
        showPopover(
          context: context,
          direction: PopoverDirection.top,
          width: 500,
          height: 300,
          arrowHeight: 15,
          arrowWidth: 30,
          arrowDyOffset: -5,
          barrierColor: Colors.transparent,
          radius: 10,
          onPop: () => setState(() => isShowPopup = false),
          transitionDuration: Duration(milliseconds: 100),
          bodyBuilder: (context) {
            return GridView.builder(
              padding: EdgeInsets.all(10),
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 10, mainAxisSpacing: 10, crossAxisSpacing: 10, childAspectRatio: 1),
              itemCount: 99,
              itemBuilder: (context, index) {
                return YButton(
                  isInk: true,
                  padding: EdgeInsets.all(5),
                  child: Image.asset("images/emoji/common/emoticon_${index + 1}.png"),
                  onTap: () => widget.onFaceTap(index),
                );
              },
            );
          },
        );
      },
    );
  }
}
